{extend name="./app/admin/view/main.html" /}
{block name="title"}短内容分类管理 - {/block}

{block name="style"}
<style>
</style>
{/block}

{block name="main"}
<header class="mipcms-container-header" style="width:915px">
    <div class="float-left header-group">
        <h4 class="title">短内容分类管理</h4> <h5 class="sub-title">全部</h5>
    </div>
    
    <div class="float-right">
         <button type="button" class="pull-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='clkAddTinyinfoCode'>
            <span><Icon type="plus-round"></Icon> 添加短内容分类</span>
        </button>
    </div>
</header>
<main class="mipcms-container-body" style="height: calc(100% - 50px)">

    <section class="mip-box" style="width:900px">
        <section class="mip-box"  >
            <section class="mip-box-body">

                <section class="diy-table-list" v-cloak>
                    <div class="content-list-header clearfix">
                         <div class="float-left m-b-xs">
                            <i-input v-model="searchData" placeholder="请输入搜索的关键词" style='width: 300px;'>
                                <i-Button slot="append" icon="ios-search" @click='itemSearchClick'></i-Button>
                            </i-input>
                        </div>
                        <div class="float-right">
                            <button class="ivu-btn ivu-btn-text" type="text" :disabled='!listSelectStatus' @click="itemsDel"><i class="ivu-icon ivu-icon-ios-trash"></i> 批量删除</button>
                        </div>
                    </div>

                    <table class="table table-hover diy-table-list">
                        <thead>
                        <tr class="diy-table-item-header">
                            <th style="width: 60px"><Checkbox v-model="listSelectStatus"  :disabled='!tinyinfoCodeList.length' @on-change='itemListSelectChange'></Checkbox>全选&nbsp;</th>
                            <th style="width: 200px">编号 </th>
                            <th>描述 </th>
                            <th style="width:120px">操作</th>
                        </tr>
                        </thead>

                        <tbody class="diy-table-body">
                        <template v-if='tinyinfoCodeList.length' v-for='(item,index) in tinyinfoCodeList'>

                            <tr class="tr1 diy-table-item">
                                <td>
                                    <Checkbox v-model="item.selectedStatus"></Checkbox>
                                </td>
                                <td><span>{{item.code}}</span></td>
                                <td><span>{{item.description}}</span></td>
                                <td>
                                    <Button-Group size="small" shape="circle">
                                        <i-button type="success" @click="itemEdit(item)">修改</i-button>
                                        <i-button type="warning" @click="itemDel(item)">删除</i-button>
                                    </Button-Group>
                                </td>
                            </tr>
                        </template>

                        </tbody>
                    </table>


                </section>
                <!--内容列表结束-->
                <!--分页-->
                <div class="text-right clearfix mt-3" >
                    <div class="diy-table-item float-left" style="margin-left: 10px;">
                        <Checkbox v-model="listSelectStatus" :disabled='!tinyinfoCodeList.length' @on-change='itemListSelectChange'>全选</Checkbox>
                    </div>
                    <Page :total="pagination.total" @on-page-size-change='itemPaginationSelect' :page-size-opts='[20,100,500,1000,5000]'
                          show-total show-sizer placement='top' @on-change='itemPaginationClick'></Page>
                </div>
            </section>
        </section>
    </section>
</main> 
 <Modal :title="dialogItemTitle" size="small" v-model='dialogItemStatus' v-cloak>
    <i-form :model="tinyinfoCode" :rules="itemRules" ref="tinyinfoCode" :label-width="80" >
        <Form-Item label="短内容编号" prop="code">
            <i-input v-model="tinyinfoCode.code" placeholder="例：banner_imgs"></i-input>
        </Form-Item>
        <Form-Item label="短内容分类描述" prop="title">
            <i-input v-model="tinyinfoCode.description"></i-input>
        </Form-Item>
    </i-form>
    <div slot="footer" class="dialog-footer">
        <i-button @click="dialogItemStatus = false">取 消</i-button>
        <i-button type="primary" @click="itemPost('tinyinfoCode')">确 定</i-button>
    </div>
</Modal>
        
{/block}
    
{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            listSelectStatus: false,
            tinyinfoCodeList: [],
            searchData: '',

            tinyinfoCode: {
                id: '',
                code: '',
                description: '',
            },
            dialogItemTitle: '添加标签',
            dialogItemStatus: false,
            
            itemRules: {
                code: [{
                    required: true,
                    message: '请输入短内容编号',
                    trigger: 'blur'
                }],
            },
            
            pagination: {
                currentPage: 1,
                limit: 20,
                total: this.total,
            },
        },
       watch: {
            tinyinfoCodeList: {
                handler(newValue, oldValue) {
                    var tempStatus = false;
        　　　　　for (var i = 0; i < this.tinyinfoCodeList.length; i ++) {
                    if (this.tinyinfoCodeList[i].selectStatus == true) {
                        tempStatus = true;
                    }
                }
                if (tempStatus) {
                    this.listSelectStatus = true;
                } else {
                    this.listSelectStatus = false;
                }
        　　　　},
        　　　　deep: true
        　　}
        },
        mounted() {
            this.getItemList();
        },
        methods: {

            clkAddTinyinfoCode() {
                this.tinyinfoCode.id = '';
                this.tinyinfoCode.code = '';
                this.tinyinfoCode.description = '';

                this.dialogItemTitle = '添加标签';
                this.dialogItemStatus = true;
            },
            itemsDel() {
                var _this = this;
                this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        var itemIds = [];
                        for(var i = 0; i < this.tinyinfoCodeList.length; i++) {
                            if (this.tinyinfoCodeList[i].listSelectStatus) {
                                itemIds.push(this.tinyinfoCodeList[i].id);
                            }
                        }
                        itemIds = itemIds.join(',');
                        this.$mip.ajax('{$mipInfo.domain}/tinyinfo/ApiAdminTinyinfoCode/do_dels', {
                            ids: itemIds,
                        }).then(function(res) {
                            if(res.code == 1) {
                                _this.$Message.success(res.msg);
                            }
                            _this.getItemList();
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            itemDel(item) {
                 var _this = this;
                this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        _this = this;
                        this.$mip.ajax('{$mipInfo.domain}/tinyinfo/ApiAdminTinyinfoCode/do_dels', {
                            ids: item.id,
                            codes: item.code
                        }).then(function(res) {
                            if(res.code == 1) {
                                _this.$Message.success('删除成功');
                                _this.getItemList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            itemEdit(item) {
                this.tinyinfoCode = item ;

                this.dialogItemTitle = '修改标签';
                this.dialogItemStatus = true;
            },
            itemPost(val) {
                var _this = this;

                this.$refs[val].validate((valid) => {

                    if(valid) {
                        let saveStatus = null;
                        if (this.tinyinfoCode.id) {
                            saveStatus = "edit";
                        }else {
                            saveStatus = 'add';
                        }

                        this.$mip.ajax('{$mipInfo.domain}/tinyinfo/ApiAdminTinyinfoCode/do_save', {
                            id: this.tinyinfoCode.id,
                            code: this.tinyinfoCode.code,
                            description: this.tinyinfoCode.description,
                            saveStatus: saveStatus,
                        }).then(function(res) {
                            if(res.code == 1) {
                                _this.$Message.success(res.msg);
                                _this.getItemList();
                                _this.dialogItemStatus = false;
                            }
                        });

                        
                    }
                });
            },
            getItemList() {
                this.loading = true;
                var _this = this;
                this.$mip.ajax('{$mipInfo.domain}/tinyinfo/ApiAdminTinyinfoCode/get_list', {
                    page: this.pagination.currentPage,
                    limit: this.pagination.limit,
                    keywords: this.searchData,
                }).then(function(res) {
                    _this.tinyinfoCodeList = [];
                    if(res.code == 1) {
                        var itemList = res.data.list;
                        if (itemList) {
                            for (var i = 0; i < itemList.length; i++) {
                                itemList[i].selectStatus = false;
                            }
                            _this.tinyinfoCodeList = itemList;
                        }
                        _this.pagination.total = res.data.total;
                    }
                    _this.loading = false;
                });
            },

            //选择全部
            itemListSelectChange() {
                var itemList = this.itemList;
                for (var i = 0; i < itemList.length; i++) {
                    if (this.listSelectStatus) {
                        itemList[i].selectStatus = true;
                    } else {
                        itemList[i].selectStatus = false;
                    }
                }
                this.itemList = itemList;
            },
            itemPaginationSelect(val) {
                this.pagination.limit = val;
                this.getItemList();
            },
            itemPaginationClick(val) {
                this.pagination.currentPage = val;
                this.getItemList();
            },
            //搜索
            itemSearchClick: function() {
                this.getItemList();
            },
        }
    })
  </script>
{/block}